.footer{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
}

.footer a{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.list{
    flex: 1;
    overflow-y: auto;
}

.active{
    color: rgb(36, 196, 36);
}

.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

header{
    width: 100%;
    height: 50px;
    line-height: 50px;
}

.right{
    display: flex;
    float: right;
}

.right div{
    margin-right: 10px;
}

main{
    flex: 1;
    overflow-y: auto;
}

dl{
    display: flex;
    align-items: center;
    margin: 0 10px;
}

dt img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
}

dd h3{
    margin-bottom: 6px;
}

.one{
    height: 50px;
    margin:0 10px;
}

.one img{
    width: 100%;
    height: 100%;
    margin: 4px;
}

.two{
    height:90px;
    line-height:25px;
    border-radius: 5px;
    margin: 0 10px;
    background: #fff;
    margin: 15px 10px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}

.three{
    margin: 10px;
    background: #fff;
    height: 280px;
    border-radius: 5px;
}

.dingdan{
    margin: 10px;
    /* background: #f1f1f1; */
    height: 60px;
    border-radius: 5px;
}

.dingdan h3{
    margin-left: 15px;
    padding: 10px;
}

.dingdan .dd{
    margin: 0 10px;
}

.dd span{
    font-size: 14px;
}

.dd p{
    margin-left: 40px;
    color: #666;
}

.dangan{
    margin: 10px;
    height: 70px;
    /* background: #f1f1f1; */
    border-radius: 5px;
}

.dangan h3{
    margin-left: 15px;
    padding: 10px;
}

.dangan .da{
    margin: 0 10px;
    align-items: center;
    text-align: center;
}

.da span{
    text-align: center;
    font-size: 12px;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    background: rgb(255, 119, 70);
}

.da p{
    margin-top: 15px;
    font-size: 12px;
    color: #666;
}

.three h3{
    margin-left: 15px;
    padding: 10px;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    text-align: center;
}

.three .menu a{
    width: 25%;
    margin: 8px 0;
}

.three .menu a dl{
    display: flex;
    flex-direction: column;
}

.menu a dl dt img{
    width: 25px;
    height: 25px;
    margin: 0 auto;
}

.menu a dl dd{
    font-size: 12px;
    color: #333;
    margin-top: 3px;
}

.public1{
    width: 100%;
    height: 100%;
    /* background-image: url('./img/000.png'); */
    text-align: center;
    align-items: center;
}

.public1 header{
    font-size: 20px;
    font-weight: bold;
}
.login{
    width: 300px;
    height: 100px;
    margin: 35px;
}

.login p{
    padding: 10px 0;
}

.login p input{
    width: 250px;
    height: 35px;
    border: none;
    font-size: 14px;
    text-indent: 12px;
}

.login button{
    width: 70px;
    height: 30px;
    margin: 10px 5px;
    border: none;
    background: #ccc;
}

.login button:hover{
    background: red;
}


/* ================ 科普 =================== */
.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.wrap header{
    height: 50px;
    background: #fff;
    /* border-bottom: 1px solid #ccc; */
}

header .head{
    height: 30px;
    line-height: 35px;
    margin: 10px 5px;
    align-items: center;
    text-align: center;
}

.head input{
    width: 300px;
    height: 30px;
    border: none;
    font-size: 13px;
    text-indent: 12px;
    border-radius: 0 25px 25px 0;
    background: #f1f1f1;
}

.head .rv-badge__wrapper{
    font-size: 18px;
    width: 40px;
    height: 31px;
    line-height: 27px;
    border-radius: 25px 0 0 25px;
    background: #f1f1f1;
}

main{
      flex: 1;
      overflow-y: auto;
}

.tab1{
    width: 100%;
    height: auto;
}

.tab1 .my-swipe img{
    width: 100%;
    height: 160px;
}

/* .tab1 .active{
    background: green;
} */



.kepu{
    width: 100%;
    height: auto;
    border-bottom: 1px solid #999;
    background: #fff;
    align-items: center;
}

.shaixuan{
    width: 100%;
    height: 40px;
    padding: 10px 15px;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    margin-top: 5px;
}

.shaixuan span{
    font-size: 14px;
    padding: 3px 18px;
    background: #f1f1f1;
}

.kepu .kp{
    display: flex;
    margin: 10px 15px;
    align-items: center;
}

.kp img{
    width: 100px;
    height: 100px;
    margin-right: 15px;
    /* 等比例缩放 */
    object-fit: cover;
}

.kp .kp1 p{
    font-size: 17px;
}   

.kp .kp2{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-top: 15px;
}

.kp2 .kp21 span{
    margin: 0 5px;
}

.kp2 .kp22 span{
    margin: 0 5px;
}

.ht{
    width: 100%;
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
}

.ht .ht1{
    display: flex;
    align-items: center;
    text-align: center;
}

.ht1 img{
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.ht1 .ht11 p{
    display: flex;
    margin:6px 15px;
}

.ht11 p b{
    font-size: 14px;
    color: #000;
    margin: 0 5px;
    font-weight: normal;
}

.ht11 p span{
    font-size: 14px;
    color: #999;
    margin: 0 5px;
}

.ht11 p i{
    font-style: normal;
    font-size: 12px;
    border: 1px solid #999;
    padding:0 5px;
    border-radius: 10px;
    margin-right: 8px;
    color: #666;
}

.ht11 p s{
    font-size: 14px;
    color: #666;
}

.ht2 p:nth-child(1){
    font-size: 16px;
    color: #000;
    margin: 10px 0;
}

.ht2 p:nth-child(2){
    font-size: 13px;
    color: #999;
    line-height: 24px;
}

.ht3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    margin-top: 10px;
}

.ht31{
    display: flex;
}

.ht32{
    display: flex;
    font-size: 12px;
    line-height: 12px;
    padding: 0px 1px;
    border: 1px solid #999;
    border-radius: 10px;
    background: #f1f1f1;
}

.ht31 span{
    margin: 0 5px;
}





/* --------------------home-------------------- */

.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home{
    flex: 1;
    overflow-y: scroll;
}

 .home .my-swipe img {
    width: 100%;
    height: 130px;
    /* border-radius: 30px; */
    padding: 5px 15px;
}

.home1{
    display: flex;
    justify-content: space-between;
    margin: 10px 15px;
}

.home2{
    display: flex;
    align-items: center;
    text-align: center;
    border: 1px solid #ccc;
    padding:10px 13px;
    border-radius: 5px;
    box-shadow: 0 0 3px 3px #f1f1f1;
}

.home2 img{
    width: 60px;
    height: 50px;
}

.home3 p:nth-child(1){
    font-size: 20px;
}

.home3 p:nth-child(2){
    font-size: 12px;
}

.homea{
    display: flex;
    padding: 10px 15px;
    text-align: center;
}

.homea .homeb{
    width: 25%;
    display: flex;
    flex-direction: column;
}

.homeb img{
    width: 35px;
    height: 35px;
    margin: 0 auto;
}

.homeb span{
    margin-top: 5px;
    font-size: 13px;
}

.title{
    margin: 10px 15px;
}

.title .t1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}

.t1 h3{
    font-size: 18px;
}

.t1 p span{
    margin-right: 5px;
}

.tu{
    width: 100%;
    display: flex;
}

.tu1{
    width: 50%;
    padding: 5px;
}

.tu1 .tu11 img{
    width: 100%;
    height: 68px;
}

.tu1 .tu12 img{
    width: 100%;
    margin-top: 5px;
    height: 90px;
}

.tu2{
    width: 50%;
    padding: 5px;
}

.tu2 .tu21 img{
    width: 100%;
}

.tu2 .tu22 img{
    width: 100%;
    margin: 5px 0;
}

.tu2 .tu23 img{
    width: 100%;
}

.comment{
    width: 100%;
    margin: 10px 0;
}

.comment h3{
    margin: 0 15px;
    font-size: 18px;
}

.coms{
    width: 100%;
    /* height: 400px;
    overflow: hidden; */
    overflow-y: scroll;
    padding: 5px 15px;
}

.coms p{
    font-size: 14px;
    margin: 5px 0;
}

.coms p span{
    margin-left: 5px;
}

.coms p .icon{
    color: orangered;
}

.coms .goodcom{
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
}

.coms .goodcom p:nth-child(1){
    font-size: 14px;
    color: #666;
}

.coms .goodcom p:nth-child(2){
    font-size: 15px;
    color: #000;
    margin: 10px 0;
}

.coms .goodcom p:nth-child(3){
    display: flex;
    background: #f7f4f4;
    font-size: 15px;
    color: #666;
}

.coms .goodcom p:nth-child(3) img{
    width: 20px;
    height: 20px;
    border-radius: 10px;
}

.coms .goodcom p:nth-child(3) span{
    font-size: 13PX;
    margin: 0 5px;
}

/* ---------------商城---------------- */

.sone{
    width: 100%;
    height: auto;
    margin-top: 15px;
}

.s1{
    display: flex;
    align-items: center;
    margin: 10px 15px;
}

.s1 img:nth-child(1){
    width: 100px;
    height: 30px;
}

.s1 img:nth-child(2){
    width: 120px;
    height: 25px;
}

.sone .imgs{
    display: flex;
    flex-wrap: wrap;
}

.imgs a{
    width: 20%;
    margin: 6px 0;
}

.imgs a dl{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.imgs a dl dt img{
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.imgs a dl dd{
    font-size: 13px;
    color: #000;
    margin-top: 2px;
}

.lunbo{
    margin: 10px 0;
}

.lunbo .my-swipe img {
    width: 100%;
    height: 130px;
    padding: 0 15px;
}


.look{
    width: 100%;
    margin-top: 15px;
}

.look .tp img{
    width: 100%;
    height: 170px;
    border-radius: 7%;
    padding: 0 15px;
    object-fit: cover;
}

.chose{
    width: 100%;
    margin-top: 15px;
}

.chose h4{
    font-size: 20px;
    margin: 0 15px;
}

.chose .tw{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
}

.tw .tw1{
    width: 50%;
    align-items: center;
    padding: 10px 15px;
}

.tw1 a img{
    width: 100%;
    object-fit: cover;
}

.tw1 .intro p:nth-child(1){
    text-indent: 12px;
    font-size: 14px;
    color: #000;
}

.tw1 .intro p:nth-child(2){
    text-indent: 12px;
    color: orange;
    font-size: 13px;
    margin-top: 5px;
}

/* ----------------设置---------------------- */
.tou{
    display: flex;
    background: #f1f1f1;
    align-items: center;
    text-align: center;
}

.tou .icons{
    margin-left: 15px;
    font-size: 18px;
}

.tou span{
    margin-left: 36%;
    font-size: 18px;
}

.ex{
    width: 100%;
}

.ex p{
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin: 10px 0;
    background: #f1f1f1;
    align-items: center;
    text-indent: 15px;
    font-size: 18px;
}

.ex p .ico{
    margin-left: 60%;
}

.ex button{
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 20px 10%;
    font-size: 18px;
    background: red;
    border: none;
    color: #fff;
    border-radius: 50px;
}

/* --------------商品详情--------------- */
.detail{
    background: #f1f1f1;
    height: 50px;
}

.detail .icons{
    font-size: 18px;
    margin-left: 15px;
}

.detail span{
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    margin-left: 30%;
}

.fff{
    width: 100%;
    /* height: 300px;
    overflow: hidden; */
    overflow-y: scroll;
}

.fff .finally{
    margin: 0 15px;
    padding: 5px;
}

.fff .finally p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.fff .finally p span:nth-child(1){
    font-size: 16px;
    color: #666;
}

.fff .finally p span:nth-child(2){
    font-size: 14px;
    color: #999;
}

.fff .finally .fin{
    display: flex;
}

.fin img{
    width: 60px;
    height: 60px;
    margin-right: 15px;
}

.fin p{
    font-size: 15px;
    line-height: 22px;
}


/* ----------脚-------------- */
footer{
    width: 100%;
    height: 50px;
}

.gift{
    height: 50px;
    background: #fff;
    /* border-bottom: 1px solid #ccc; */
}

.sea{
    height: 30px;
    line-height: 35px;
    margin: 10px 5px;
    align-items: center;
    text-align: center;
}

.sea input{
    width: 300px;
    height: 30px;
    border: none;
    font-size: 13px;
    text-indent: 12px;
    border-radius: 0 25px 25px 0;
    background: #f1f1f1;
}

.sea .rv-badge__wrapper{
    font-size: 18px;
    width: 40px;
    height: 31px;
    line-height: 27px;
    border-radius: 25px 0 0 25px;
    background: #f1f1f1;
}

.giftLists{
    display: flex;
    padding: 10px 15px;
}

.giftLists img{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    
}

.giftLists .gifts{
    margin-left: 15px;
}

.gifts p:nth-child(1){
    font-size: 16px;
}

.gifts p{
    line-height: 26px;
}

.gifts p:nth-child(2){
    font-size: 14px;
    color: #999;
}

.gifts .p:nth-child(3){
    display: flex;
    font-size: 14px;
    color: #999;
    margin-top: 24px;
}

.gifts .p:nth-child(3) .gif{
    display: flex;
    align-items: center;
    text-align: center;
    margin-right: 40px;
}


.gif span:nth-child(1){
    color: orangered;
    margin-right: 5px;
    font-size: 15px;
}

.gif span:nth-child(2){
    font-size: 13px;
    width: 50px;
    height: 17px;
    line-height: 17px;
    padding: 0 2px;
    background: rgb(231, 68, 8);
    color: #fff;
    border-radius: 3px;
}

.detailList{
    padding: 15px;
    /* background: #f1f1f1; */
}

.detailList img{
    width: 100%;
    height: 300px;
}

.detailList p{
    margin: 15px 0;
}

.detailList p:nth-of-type(1){
    font-size: 20px;
    font-weight: bold;
}

.detailList p:nth-of-type(2){
    font-size: 16px;
    color: #666;
}

.detailList p:nth-of-type(2){
    font-size: 16px;
    color: #666;
}

/* -----------shopcar--------------- */

footer {
    width: 100%;
    height: 50px;
    background: #f1f1f1;
}

footer .foot{
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

.fot{
    display: flex;
    align-items: center;
}

.fot p{
    font-size: 14px;
}

.fot button{
    width: 120px;
    height: 35px;
    line-height:35px;
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
    border: none;
    outline: none;
}

.foot input{
    width: 14px;
    height: 14px;
}



.shopcar{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
}

.shopcar img{
    width: 30%;
    height: 100px;
    border: 1px solid #999;
    padding: 3px;
    margin: 0 5px;
}

.shopcar .carfont{
    width: 66%;
}

.shopcar .carfont p{
    font-size: 16px;
}

.carfont .fonts{
    display: flex;
    justify-content: space-between;
    margin-top: 55px;
    padding:0 5px;
}

.carfont .fonts span{
    font-size: 14px;
    color: orangered;
}

.fonts .fon{
    display: flex;
    align-items: center;
}

.fonts .fon button{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: none;
    border-radius: 2px;
    background: #ccc;
}

.fonts .fon span{
    color: #000;
    margin: 0 3px;
}

.fonts .fon .del{
    font-size: 22px;
    margin-left: 10px;
}

/* ------热点详情-------- */
.hotspot{
    width: 100%;
}

.hotspot img{
    width: 100%;
    height: 230px;
    object-fit: initial;
}

.hotspot p:nth-of-type(1){
    font-size: 20px;
    text-indent: 12px;
    font-weight: bold;
    margin: 10px;
}

.hotspot p:nth-of-type(2){
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    color: #666;
    margin: 15px 0;
}

.hotspot p:nth-of-type(3){
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    color: #666;
    margin: 15px 0;
}


.add{
    width: 100%;
}

.add p{
    margin: 5px 0;
}

.add p label{
    font-size: 16px;
    margin-left: 12px;
}

.add p input{
    width: 200px;
    height: 30px;
}

.add button{
    font-size: 16px;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-left: 90px;
}

.li{
    display: flex;
    align-items: center;
    padding: 10px;
}

.li p{
    margin-left: 15px;
}

.li img{
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.lis{
    display: flex;
    align-items: center;
    padding: 10px;
}

.lis p{
    margin-left: 15px;
}

.lis img{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-top: 20px;
}

footer input{
    text-indent: 12px;
}